<template>
  <div class="api-key-verifier">
    <!-- API Key验证区域 -->
    <div class="key-verify-area">
      <el-input
        v-model="apiKey"
        placeholder="请输入API Key..."
        type="password"
        :disabled="verifying"
        v-if="!isKeyVerified"
      >
      </el-input>
      <el-button
        type="primary"
        @click="verifyApiKey"
        :loading="verifying"
        v-if="!isKeyVerified"
      >
        验证
      </el-button>
      <div
        v-if="isKeyVerified"
        class="verified-info"
      >
        <el-tag type="success">API Key已验证</el-tag>
        <el-button
          type="danger"
          size="small"
          plain
          @click="clearApiKeyData"
        >登出
        </el-button>
      </div>
      <el-select
        v-if="showModelSelector && availableModels.length > 0"
        v-model="selectedModel"
        placeholder="选择模型"
        @change="handleModelChange"
      >
        <el-option
          v-for="model in availableModels"
          :key="model.value"
          :label="model.label"
          :value="model.value"
        />
      </el-select>
    </div>
  </div>
  <el-divider style="margin: 15px 0;"></el-divider>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useApiKeyStore } from '@/stores/apiKeyStore'

// 定义组件属性
interface Props {
  showModelSelector?: boolean
}

withDefaults(defineProps<Props>(), {
  showModelSelector: true
})

// 使用全局API Key store
const apiKeyStore = useApiKeyStore()

// 提取store中的状态
const apiKey = computed(() => apiKeyStore.apiKey)
const isKeyVerified = computed(() => apiKeyStore.isKeyVerified)
const verifying = computed(() => apiKeyStore.isVerifying)
const availableModels = computed(() => apiKeyStore.availableModels)
const selectedModel = computed({
  get: () => apiKeyStore.selectedModel,
  set: (value) => {
    // 只设置值，不调用API，避免重复调用
    apiKeyStore.selectedModel = value
  }
})

// 初始化
onMounted(async () => {
  // 只有在未初始化且未验证的情况下才执行初始化
  if (!apiKeyStore.hasInitialized && !apiKeyStore.isKeyVerified) {
    await apiKeyStore.initialize()
  }
})

// API Key验证方法
const verifyApiKey = () => {
  if (apiKey.value) {
    apiKeyStore.verifyApiKey(apiKey.value)
  } else {
    ElMessage.warning('请输入API Key')
  }
}

// 处理模型变更
const handleModelChange = (model: string) => {
  // 直接调用setModel方法，因为computed的setter已经被修改为不调用API
  apiKeyStore.setModel(model)
}

// 清除API Key数据
const clearApiKeyData = () => {
  apiKeyStore.clearApiKeyData()
  ElMessage.success('已清除API Key和验证状态')
}

// 暴露组件方法和属性给父组件
defineExpose({
  verifyApiKey,
  clearApiKeyData,
  isKeyVerified,
  selectedModel
})
</script>

<style scoped>
.api-key-verifier {
  margin: 0.5rem 0;
}

.key-verify-area {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.key-verify-area > * {
  flex-grow: 1;
  flex-shrink: 0;
  min-width: 150px;
}

.key-verify-area .el-button {
  flex-grow: 0;
}

.key-verify-area .el-select {
  flex-grow: 0;
  min-width: 200px;
}

.verified-info {
  display: flex;
  gap: 1rem;
  align-items: center;
}
</style>
